<template>
  <van-loading size="1rem" v-if="!state.songs.length" class="loading"
    >音乐舞台正在搭建中...</van-loading
  >
  <div v-else>
    <ItemMusicTop :playlist="state.playlist"></ItemMusicTop>
    <ItemMusicList
      :songs="state.songs"
      :subscribedCount="state.playlist.subscribedCount"
    ></ItemMusicList>
  </div>
</template>

<script>
import { useRoute } from "vue-router";
import { onMounted, reactive } from "vue";
import { reqMusicDetailInfo, reqMusicListInfo } from "@/api/item";
import ItemMusicTop from "@/components/Item/ItemMusicTop";
import ItemMusicList from "@/components/Item/ItemMusicList";

export default {
  components: { ItemMusicTop, ItemMusicList },
  setup() {
    //数据
    let state = reactive({
      playlist: {},
      songs: [],
    });
    //钩子
    onMounted(async () => {
      let id = useRoute().query.id;
      //获取详情数据
      let result1 = await reqMusicDetailInfo(id);
      //获取歌单全部歌曲
      let result2 = await reqMusicListInfo(id);
      if (result1.status == 200) {
        state.playlist = result1.data.playlist || {};
      }
      if (result2.status == 200) {
        state.songs = result2.data.songs || [];
      }
    });
    return {
      state,
    };
  },
};
</script>

<style lang="less" scoped>
.loading {
  text-align: center;
  line-height: 100%;
  margin-top: 5rem;
}
</style>